<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <div class="box"></div>
    <script>
        // 为了实现 新的渲染数据的方式
        // 自己做一个模板引擎
        // 数据劫持
        // 数据渲染
        // 数据代理 

        // 数据劫持 
        // 对原始数据进行复制 
        // 复制出来的数据不允许修改 
        // ( defineProperty 里边的get set) 不能修改复制后的数据 
        // 当defineProperty 结束了 可以对复制后的数据
        // 值从原始数据中获取的  

        // // 准备原始数据
        // const data = {
        //     name: '张三',
        //     info: {
        //         address: '北京'
        //     }
        // }

        // Object.defineProperty(哪一个对象, 哪一个属性, {配置项})

        // 配置项 
        /* 
        
            value: 属性对应的值
            writable: 是否允许修改属性对应的值 默认是false
            enumerable: 是否允许枚举 默认是false 
            get: 是个函数 用来获取属性对应的值  沙箱语法糖那个get一样
            返回值是 属性对应的值

            不能和value writable 一起使用  
            set: 是个函数 用来设置属性对应的值  
            沙箱语法糖那个set一样
        
        
        */
    // console.log(data);
    //    Object.defineProperty(data,'age',{
    //         // value: 18,
    //         //   writable: true,
    //           enumerable: true,
    //         get(){
    //             return 20;
    //         },
    //         set(val){
    //             console.log('你想设置的值位'+val);
    //         }
    //    })

    //    data.age = 100; 
    //    console.log(data);// 18

    //    for(let key in data){
    //        console.log(key); // name info 没有age
    //        // 只有enumerable: true 才能有age 
    //    }
    // data.age = 100;
    // console.log(data.age); 

    //    for(let key in data){
    //        console.log(key); // name info 没有age
    //        // 只有enumerable: true 才能有age 
    //    }
    
    // const res = {}
    // Object.defineProperty(res,'name',{
    //     get(){
    //         return data.name;
    //     },
    //     set(val){
    //         data.name = val;
    //         document.querySelector('.box').innerHTML = val;
    //     }
    // })

    // res.name = '王五';
    // console.log(data)


    // const data = {
    //         name: '张三',
    //         info: {
    //             address: '北京'
    //         }
    // }


    // const res = {}

    // Object.defineProperty(res,'name',{
    //     get(){
    //         return data.name;
    //     },
    //     set(val){
    //         data.name = val;
    //         document.querySelector('.box').innerHTML = val;
    //     }
    // })

    // res.name = '赵四';

    // const obj = {name:'张三',age:18}

    // var res = {}
    // Object.defineProperty(obj,'name',{
    //     // obj在这里表示复刻的数据 
    //     // value: '李四',
    //     // writable: false,
    //     // enumerable: false,
    //     get(){
    //         return  obj.name;
    //     },
    //     set(val){
    //         obj.name = val; // 改复刻的数据 报错 
    //         // 改的话不能 改复刻的数据  要改原始数据
    //         document.querySelector('.box').innerHTML = val;
    //     }

    
    // })

    // obj.name = '王五';
    // console.log(obj);
    // console.log(obj.name);
    obj.name = '王二麻子'
    console.log(obj);

    // for(let key in obj){
    //     console.log(key);
    // }

    </script>
</body>
</html>